.site-index{
  height: 100%;
  background-color: #fff;
  .site-frame-media{
    position: relative;
    @include px2rem(height, 424);
    .self-media{
      height: 100%;
      width: 100%;
    }
    .media-poster{
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 9;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }
  }
  .site-frame-content{
    @include px2rem(margin-top, 72);
    @include px2rem(padding-left, 30);
    .media-title{
      @include px2rem(padding-right, 20);
      @include display-flex();
      span:first-child{
        color: #333333;
        @include font-dpr(40);
        font-weight: 600;
        @include flex(1);
        @include px2rem(max-width, 600);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      span:first-child+span{
        color: #999999;
        @include font-dpr(28);
        text-align: right;
        @include display-flex();
        @include align-items(center);
        i{
          @include wh(28, 28);
          display: inline-block;
          @include px2rem(margin-left, 10);
          background: url(./assets/icon/icon_more.png) no-repeat center center;
          @include px2rem(background-size, 28 28);
          &.slide{
            transform: rotate(90deg)
          }
        }
      }
    }
    .play-count{
      color: #999999;
      @include font-dpr(24);
      @include px2rem(margin-top, 32);
    }
    .introduce{
      color: #666666;
      @include font-dpr(28);
      @include px2rem(margin-top, 20);
    }
    .author{
      @include px2rem(margin-top, 22);
      @include px2rem(padding-right, 20);
      @include px2rem(padding-bottom, 28);
      border-bottom: 1px solid #e5e5e5;
      @include display-flex();
      @include align-items(center);
      @include justify-content(space-between);
      .author-info{
        @include display-flex();
        @include align-items(center);
        img{
          @include wh(80, 80);
          border-radius: 50%;
          @include px2rem(margin-right, 10);
        }
        span{
          color: #333333;
          @include font-dpr(28);
          @include px2rem(max-width, 350);
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    .attention{
      span{
        @include btnScss(132, 46, #FF8221, #fff, 28);}
      }
    }
    .media-info{
      @include px2rem(padding-right, 20);
      @include px2rem(margin-top, 30);
      @include display-flex();
      @include align-items(center);
      @include justify-content(space-between);
      span:first-child{
        color: #333333;
        @include font-dpr(36);
        font-weight: 600;
      }
      span:first-child+span{
        color: #999999;
        @include font-dpr(28);
        text-align: right;
        @include display-flex();
        @include align-items(center);
        i{
          @include wh(28, 28);
          display: inline-block;
          @include px2rem(margin-left, 10);
          background: url(./assets/icon/icon_more.png) no-repeat center center;
          @include px2rem(background-size, 28 28);
        }
      }
    }
    .media-count{
      @include px2rem(margin-top, 30);
      ul{
        overflow-x: scroll;
        @include display-flex;
        @include px2rem(height, 110);
        li{
          @include px2rem(margin-right, 20);
          span{
            text-align: center;
            @include font-dpr(40);
            color: #333333;
            @include px2rem(line-height, 110);
            @include wh(110, 110);
            display: inline-block;
            background:rgba(249,249,249,1);
            @include px2rem(border-radius, 8);
            &.active{
              color: #FF8221;
            }
          }
        }
      }
    }
  }
}
.site-frame-minimedia{
  height: 100%;
  background-color: #000;
  overflow: hidden;
  .self-media{
    height: 100%;
    width: 100%;
  }
}
.btn{
  border-radius: 10px;
  background-color: #ce3249;
  width: 100px;
  text-align: center;
  height: 50px;
  line-height: 50px;
  color: #fff;
}
.right-userInfo{
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 20;
  color: #fff;
  @include px2rem(width, 160);
  @include px2rem(height, 800);
  @include display-flex();
  @include flex-direction(column);
  align-items: center;
  .static-count-font{
    @include font-dpr(28);
    color: #fff;
  }
  .avatar{
    position: relative;
    i{
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%,30%);
      @include wh(36, 36);
      display: inline-block;
    }
    img{
      @include wh(96, 96);
      border-radius: 50%;
      border:1px solid rgba(255,255,255,1);
    }
  }
  .attention-count{
    @include px2rem(margin-top, 78);
    @include display-flex();
    @include flex-direction(column);
    @include align-items(center);
  }
  .comment-count{
    @include px2rem(margin-top, 42);
    @include display-flex();
    @include flex-direction(column);
    @include align-items(center);
  }
  .forward-count{
    @include px2rem(margin-top, 42);
    @include display-flex();
    @include flex-direction(column);
    @include align-items(center);
  }
}
.bottom-userInfo{
  position: fixed;
  @include px2rem(left, 30);
  @include px2rem(bottom, 126);
  @include px2rem(right, 158);
  z-index: 20;
  color: #fff;
  h5{
    @include font-dpr(34);
    font-weight: 600;
    @include px2rem(margin-bottom, 10);
  }
  p{
    @include px2rem(line-height, 34);
  }
}
.prism-big-play-btn{
  left: 50%!important;
  top: 50%;
  transform: translate(-50%, -50%);
}
.prism-info-display{
  padding: 0!important;
}
.malyer{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: #fff;
  height: 0;
  transition: height .2s ease;
  -webkit-transition: height .2s ease;
  -moz-transition: height .2s ease;
  .header{
    @include display-flex();
    @include align-items(center);
    @include justify-content(space-between);
    @include px2rem(height, 120);
    @include px2rem(padding, 0 34);
    span:first-child{
      color: #333333;
      @include font-dpr(36);
      font-weight: 600;
    }
    span:first-child + span{
      @include wh(33, 33);
      background: url(./assets/icon/icon_close.png) no-repeat;
      @include px2rem(background-size, 33 33);
    }
  }
  ul{
    @include px2rem(padding, 0 16);
    @include display-flex();
    @include flex-wrap(wrap);
    @include justify-content(space-between);
    @include align-items(flex-start);
    &::after{
      content: "";
      flex: auto;
    }
    li{
      @include px2rem(margin, 18 8 0 8);
      span{
        text-align: center;
        @include font-dpr(40);
        color: #333333;
        @include px2rem(line-height, 101);
        @include wh(101, 101);
        display: inline-block;
        background:rgba(249,249,249,1);
        @include px2rem(border-radius, 8);
        &.active{
          color: #FF8221;
        }
      }
    }
  }
  .description{
    @include px2rem(padding-left, 30);
  }
  .introduction{
    @include px2rem(padding-top, 44);
    border-top: 1px solid #ededed;
    @include px2rem(margin-top, 50);
    .head{
      color: #333;
      @include font-dpr(32);
    }
    .int{
      color: #333;
      @include px2rem(margin-top, 32);
      @include font-dpr(28);
    }
  }
  .count{
    color: #999999;
    @include font-dpr(24);
    @include px2rem(margin-top, 14);
  }
  .media-type{
    color: #666;
    @include font-dpr(28);
    @include px2rem(margin-top, 32);
  }
  .staring{
    color: #333;
    @include font-dpr(28);
    @include px2rem(margin-top, 10);
    span{
      color: #666;
      @include font-dpr(28);
      @include px2rem(margin-top, 32);
    }
  }
}
.field-tooltipWrap {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.field-tooltip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  -webkit-transform: translate3d(-50%, -50%, 0);
}

.field-tooltip .field-invalidmsg, .field-tooltip .field-validmsg {
  color: #fff;
  background-color: rgba(0, 0, 0, .8);
}

.field-tooltip .zvalid-resultformat {
  text-align: center;
  display: inline-block;
  position: relative;
  background-color: rgba(0, 0, 0, .8);
  color: #fff;
  @include px2rem(padding,20 25);
  @include px2rem(border-radius,10);
  @include font-dpr(28);
  box-shadow: 0 0 8px rgba(0, 0, 0, .1);
  pointer-events: auto;
  animation-name: fieldTipBounceIn;
  -webkit-animation-name: fieldTipBounceIn;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: .18s;
  animation-duration: .18s
}

@-webkit-keyframes fieldTipBounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
}

@keyframes fieldTipBounceIn{
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1)
  }
}
.bottom-btn{
  .btn-app{
    position: fixed;
    left: 50%;
    z-index: 30;
    @include px2rem(bottom, 20);
    transform: translateX(-50%);
    @include btnScss(232, 48, #207DF3, #fff, 30);
    @include px2rem(border-radius, 28);
  }
}
.icon_count{
  @include wh(64, 64);
}
.prism-big-play-btn{
  &.pause{
    display: block!important;
  }
}
.prism-play-btn{
  @include px2remImportant(width, 48);
  @include px2remImportant(height, 48);
}
.prism-controlbar{
  // display: flex!important;
  // align-items: center;
}
.prism-time-display {
  font-size: 24px!important;
  @include px2remImportant(margin-top, 5);
}
.prism-controlbar {
  @include px2remImportant(height, 60);
}
.prism-setting-btn{
  @include px2remImportant(width, 48);
  @include px2remImportant(height, 48);
  margin-top: 0px!important;
}
.prism-fullscreen-btn {
  @include px2remImportant(width, 48);
  @include px2remImportant(height, 48);
  margin-top: 0px!important;
}
.prism-player .prism-big-play-btn .outter{
  @include px2remImportant(width, 102);
  @include px2remImportant(height, 102);
}
.prism-player .prism-big-play-btn{
  @include px2remImportant(width, 102);
  @include px2remImportant(height, 102);
}